<script setup lang="ts">
  import { ref } from 'vue';
  import { useWebSocket } from '@vueuse/core';
  import timebar from './timebar.vue';
  import left from './left.vue';
  import center from './center.vue';
  import right from './right.vue';

  const requestFullScreen = () => {
    document.documentElement.requestFullscreen().catch((err) => {
      console.error(`全屏请求出错: ${err.message}`);
    });
  };

  const warningInfo = ref({
    title: 'SOS智能告警发出报警',
    elderName: '',
    phoneNo: '',
    address: '',
  });

  const showWarningDialog = ref(false);

  const { status } = useWebSocket(import.meta.env.VITE_API_WSS_URL, {
    immediate: true,
    autoReconnect: {
      retries: 3,
      delay: 2000,
    },
    onMessage(_, event) {
      console.log('event', event);

      const { data } = event;

      try {
        const jsonObj = JSON.parse(data);
        warningInfo.value = jsonObj;
        showWarningDialog.value = true;
      } catch (e) {
        console.error('WS数据格式解析错误', e);
      }
    },
  });

  const hideWarningDialog = () => {
    showWarningDialog.value = false;
  };
</script>

<template>
  <div class="screen-wrapper">
    <template v-if="showWarningDialog">
      <div class="mask"></div>
      <div class="dialog-warning flex flex-col">
        <span class="dialog-title">告警信息提示</span>
        <div class="content">
          <span class="info">
            <span class="hight-light">{{ warningInfo.title }} </span>
          </span>
          <div class="notice-card mt-2">
            <span>
              长者：<span class="hight-light">{{ warningInfo.elderName }}</span>
            </span>
            <span class="hight-light">电话：{{ warningInfo.phoneNo }}</span>
            <span>
              地址：<span class="hight-light">{{ warningInfo.address }}</span>
            </span>
          </div>
        </div>
        <div class="bottom">
          <button class="primary-btn" @click="hideWarningDialog"> 关闭 </button>
          <button class="second-btn" @click="hideWarningDialog">
            已处理
          </button>
        </div>
      </div>
    </template>
    <div class="page-grid-wrapper">
      <div style="grid-area: time">
        <timebar :status="status" />
      </div>
      <div class="screen-header" style="grid-area: title">
        <h1 class="title">
          <!-- <span class="title-glow"></span> -->
          <span class="title-text">众仁康养平台指挥中心</span>
        </h1>
      </div>
      <div class="toolbar" style="grid-area: toolbar">
        <a-space>
          <a-link href="/#/elderly-archives/file">
            <template #icon>
              <icon-home />
            </template>
            管理平台
          </a-link>
          <!-- <a-link @click="requestFullScreen">
            <template #icon>
              <icon-fullscreen />
            </template>
            全屏
          </a-link> -->
        </a-space>
      </div>
      <div class="common-box" style="grid-area: left">
        <left />
      </div>
      <div style="grid-area: center">
        <center />
      </div>
      <div class="common-box" style="grid-area: right">
        <right />
      </div>
    </div>
  </div>
</template>

<style lang="less">
  @property --bg-color {
    syntax: '<color>';
    initial-value: #081850;
    inherits: false;
  }
  .screen-wrapper {
    width: 100%;
    height: 100vh;
    background-color: #090e4c;
    color: #f5f5f5;
    padding: 4px;
    background-image: url('./images/header_bg.png');
    background-position: top center;
    background-size: 100% 90px;
    background-repeat: no-repeat;
    overflow-y: auto;
    position: relative;

    /* 毛玻璃遮罩层 */
    .mask {
      position: fixed; /* 固定定位，覆盖整个页面 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
      backdrop-filter: blur(5px); /* 毛玻璃效果（核心） */
      -webkit-backdrop-filter: blur(5px); /* 兼容 Safari */
      z-index: 98; /* 确保遮罩在页面内容上方 */
    }

    .dialog-warning {
      position: absolute;
      top: 100px; /* 距上方 100px */
      left: 50%; /* 水平居中第一步：左边缘对齐父容器50%位置 */
      transform: translateX(-50%);
      background-image: url('./images/warning-dialog-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 30px 63px;
      width: 510px;
      align-items: center;
      align-self: center;
      z-index: 99;

      .dialog-title {
        font-size: 28px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }

      .content {
        padding: 22px 0;
        .info {
          font-size: 20px;
          font-weight: 400;
          color: #809fba;
          line-height: 1;

          .hight-light {
            color: #c73c3c;
          }
        }
      }

      .notice-card {
        display: flex;
        width: 100%;
        flex-direction: column;
        font-size: 18px;
        gap: 4px;

        .hight-light {
          color: #c73c3c;
        }
      }

      .bottom {
        button {
          padding: 8px 17px;
          border-radius: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          outline: none;
          border: none;
          margin: 0 10px;
          cursor: pointer;
        }

        .primary-btn {
          background: #008aff;
        }

        .second-btn {
          background: #e60012;
        }
      }
    }

    .toolbar {
      display: flex;
      justify-content: end;
      align-items: center;
      padding-right: 20px;
      color: #dcdcdc;
    }

    .screen-header {
      text-align: center;
      align-content: center;
      font-size: 28px;
      letter-spacing: 4px;
    }

    .title {
      font-size: 24px;
      font-weight: bold;
      font-style: italic;
      position: relative;
    }

    .title-glow {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #00f0ff, #7928ca);
      opacity: 0.2;
      filter: blur(12px);
      transform: translate(-2px, -2px);
      border-radius: 0.5rem;
    }

    .title-text {
      position: relative;
      background: linear-gradient(180deg, #00f0ff, #00f0ff);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 0 0 2px rgba(0, 240, 255, 0.8);
    }

    --path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 14px),
      calc(100% - 14px) 100%,
      0 100%,
      0 10px
    );

    .page-grid-wrapper {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 25% 1fr 25%;
      grid-template-rows: 40px 1fr;
      grid-template-areas:
        'time title toolbar'
        'left center right';

      gap: 10px 10px;
    }

    .common-box {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #081850 url(./images/line.png);
      background-size: 100% auto;
      position: relative;
      z-index: 10;
      padding: 6px;
    }
    .common-box:before,
    .common-box:after {
      position: absolute;
      width: 0.1rem;
      height: 0.1rem;
      content: '';
      border-top: 2px solid #02a6b5;
      top: 0;
    }
    .common-box:before,
    .boxfoot:before {
      border-left: 2px solid #02a6b5;
      left: 0;
    }
    .common-box:after,
    .boxfoot:after {
      border-right: 2px solid #02a6b5;
      right: 0;
    }

    .big-title {
      position: relative;
      width: 100%;
      padding: 4px 8px;
      border-radius: 6px;
      /* 进行裁剪 */
      clip-path: var(--path);
      font-size: 14px;
      color: #fff;
      transition: all 0.5s;
      margin-bottom: 4px;
      background: #27b6eb;
    }
    .big-title:last-child {
      margin-bottom: 0;
    }
    .big-title:hover {
      filter: brightness(1.5);
    }
    /* 添加伪元素背景 */
    .big-title::after {
      content: ' ';
      width: calc(100% - 3px);
      height: calc(100% - 3px);
      position: absolute;
      /* 水平垂直居中 */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      /* 置于底层 */
      z-index: -1;
      /* 设置背景色 */
      // background: linear-gradient(180deg, #023863 0%, #002d48 100%);
      border-radius: 4px;
      /* 设置裁剪 */
      clip-path: var(--path);
      background: #081850;
      box-shadow: inset 0 0 10px #27b6eb;
    }

    .mid-title {
      font-size: 13px;
      color: #00f9ff;
    }

    .streamer-button {
      background: var(--bg-color);
      padding: 4px;
      position: relative;
      border-radius: 8px;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
      color: rgb(88 199 250 / 100%);
      overflow: hidden;
    }
    .streamer-content {
      padding: 12px 30px;
      background: var(--bg-color);
      z-index: 10;
      border-radius: 6px;
    }

    .streamer-button:hover::before {
      content: ' ';
      animation-play-state: paused;
    }

    .streamer-button::before {
      content: ' ';
      background-image: linear-gradient(132deg, #5ddcff, #3c67e3 43%, #4e00c2);
      position: absolute;
      z-index: 0;
      left: -34px;
      right: -34px;
      padding-bottom: calc(100% + 18px);
      animation: spin 2s linear infinite;
    }

    .streamer-button-2::before {
      content: ' ';
      background-image: linear-gradient(132deg, var(--bg-color) 50%, #4e00c2);
    }

    .streamer-button-2:hover::before {
      content: ' ';
      transition: all ease 0.2s;
      background-image: linear-gradient(132deg, #4e00c2, #4e00c2);
    }

    @keyframes spin {
      0% {
        rotate: 0deg;
      }
      100% {
        rotate: 360deg;
      }
    }
  }
</style>
